<template>
  <header class="header">
    <div class="header-left">
      <h1>网易云音乐播放器</h1>
    </div>
    <div class="header-center">
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索歌曲、歌手、专辑..." 
          @keyup.enter="handleSearch"
          @input="handleSearchInput"
        />
        <button @click="handleSearch">搜索</button>
        <!-- 搜索建议 -->
        <div v-if="searchSuggestions.length > 0" class="search-suggestions">
          <div 
            v-for="suggestion in searchSuggestions" 
            :key="suggestion.keyword"
            @click="selectSuggestion(suggestion.keyword)"
            class="suggestion-item"
          >
            {{ suggestion.keyword }}
          </div>
        </div>
      </div>
    </div>
    <div class="header-right">
      <div v-if="!user" class="auth-buttons">
        <button @click="showLogin" class="login-btn">登录</button>
        <button @click="showRegister" class="register-btn">注册</button>
      </div>
      <div v-else class="user-info">
        <img :src="user.avatarUrl" :alt="user.nickname" class="user-avatar" />
        <span class="user-name">{{ user.nickname }}</span>
        <button @click="logout" class="logout-btn">退出</button>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    user: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      searchQuery: '',
      searchSuggestions: []
    };
  },
  methods: {
    handleSearch() {
      if (!this.searchQuery.trim()) return;
      this.$emit('search', this.searchQuery);
      this.searchSuggestions = [];
    },
    async handleSearchInput() {
      if (this.searchQuery.length > 1) {
        try {
          const response = await this.$http.get(`/api/search/suggest?keywords=${encodeURIComponent(this.searchQuery)}`);
          this.searchSuggestions = response.data.body.result.allMatch || [];
        } catch (error) {
          console.error('获取搜索建议失败:', error);
        }
      } else {
        this.searchSuggestions = [];
      }
    },
    selectSuggestion(keyword) {
      this.searchQuery = keyword;
      this.handleSearch();
    },
    showLogin() {
      this.$emit('show-login');
    },
    showRegister() {
      this.$emit('show-register');
    },
    logout() {
      this.$emit('logout');
    }
  }
};
</script>

<style scoped>
.header {
  background-color: #c20c0c;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.header-left h1 {
  margin: 0;
  font-size: 20px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

.search-box {
  display: flex;
  width: 400px;
  position: relative;
}

.search-box input {
  flex: 1;
  padding: 10px 15px;
  border: none;
  border-radius: 20px 0 0 20px;
  outline: none;
  font-size: 14px;
}

.search-box button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  font-size: 14px;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 0 0 10px 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.suggestion-item {
  padding: 10px 15px;
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:hover {
  background-color: #f5f5f5;
}

.header-right {
  display: flex;
  align-items: center;
}

.auth-buttons {
  display: flex;
  gap: 10px;
}

.login-btn, .register-btn {
  padding: 8px 16px;
  border: 1px solid white;
  background: transparent;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}

.login-btn:hover, .register-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.user-name {
  font-size: 14px;
}

.logout-btn {
  padding: 6px 12px;
  border: 1px solid white;
  background: transparent;
  color: white;
  border-radius: 15px;
  cursor: pointer;
  font-size: 12px;
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>